<template>
  <div class="app-container">
    <div class="flex mb-4">
      <div class="md:w-1/3">
        <p class="text-xl mb-2">总计</p>
        <el-table :data="totalData" border stripe>
          <el-table-column v-for="col in columns"
                           :key="col.id"
                           :label="col.label"
                           :prop="col.property"
                           :width="col.width"
          >
          </el-table-column>
        </el-table>
      </div>
      <div class="flex-grow ml-8">
        <p class="text-xl mb-2">筛选</p>
        <div class="flex">
          <div>
            <span>渠道名称：</span>
            <el-input
              v-model="listQuery.name"
              class="marginRB10"
              clearable
              placeholder="请输入渠道名称"
              style="width: 200px"
            ></el-input>
          </div>
          <div>
            <span>渠道ID：</span>
            <el-input
              v-model="listQuery.channel_no"
              class="marginRB10"
              clearable
              placeholder="请输入渠道ID"
              style="width: 200px"
            ></el-input>
          </div>
          <el-button
            class="marginRB10"
            icon="el-icon-search"
            type="primary"
            @click="getList"
          >搜索
          </el-button>
          <el-button class="marginRB10" @click="resetSubmit">重置</el-button>
        </div>
      </div>
    </div>
    <div class="flex items-center justify-between">
      <p class="text-xl">渠道列表（{{ total }}）</p>
    </div>

    <el-table
      ref="dataList"
      :data="menuList"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      border
      row-key="id"
      style="margin-bottom: 20px"
    >
      <el-table-column :index="indexMethod" type="index" width="150" label="编号"></el-table-column>
      <el-table-column label="渠道名称" prop="name"></el-table-column>
      <el-table-column label="渠道ID" prop="channel_no"></el-table-column>
      <el-table-column label="邀请人数（人）" prop="user_total" sortable width="150"></el-table-column>
      <el-table-column label="充值金额（元）" prop="recharge_total" sortable width="150"></el-table-column>
      <el-table-column label="创建时间" prop="add_time" sortable></el-table-column>
      <!--      <el-table-column prop="room_code" label="房间ID"></el-table-column>-->
      <!--      <el-table-column prop="state" label="状态">-->
      <!--        <template slot-scope="scope">-->
      <!--          {{ scope.row.state === 1 ? "开启" : "" }}-->
      <!--          {{ scope.row.state === 2 ? "关闭" : "" }}-->
      <!--        </template>-->
      <!--      </el-table-column>-->
      <el-table-column label="操作" min-width="180">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            @click="handleCheck(scope.row)"
          >查看
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <cus-pagination
      v-show="total > 0"
      :limit.sync="listQuery.perPage"
      :page.sync="listQuery.page"
      :total="total"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { listData } from '@/api/company/CompanyChannelList'

export default {
  data() {
    return {
      totalData: [],
      columns: [
        {
          id: 1,
          label: '总邀请人数(人)',
          property: 'user_total',
          width: 'auto'
        },
        {
          id: 2,
          label: '总充值金额（元）',
          property: 'recharge_total',
          width: 'auto'
        }
      ],
      listLoading: true,
      total: 0,
      listQuery: {
        page: 1,
        perPage: 10
      },
      selectList: [
        { key: undefined, lab: '全部状态' },
        { key: 1, lab: '开启 ' },
        { key: 2, lab: '关闭' }
      ],
      menuList: []
    }
  },
  created() {
    if (this.$route.query.company_id) {
      this.listQuery.company_id = this.$route.query.company_id
    }
    this.getList()
  },
  methods: {
    indexMethod(index) {
      return (this.listQuery.page - 1) * this.listQuery.perPage + index + 1
    },
    getList() {
      this.listLoading = true
      for (let key in this.listQuery) {
        this.listQuery[key] = this.listQuery[key] === '' ? undefined : this.listQuery[key]
      }
      listData(this.listQuery).then(({ data }) => {
        this.menuList = data.list
        this.total = data.meta.total
        this.listLoading = false
        this.totalData = [data.header]
      })
    },

    handleCheck(row) {
      this.$router.push({
        path: 'companyUser',
        query: {
          channel_no: row.channel_no
        }
      })
    },
    resetSubmit() {
      this.listQuery.page = 1
      this.listQuery.perPage = 10
      this.listQuery.channel_no = undefined
      this.getList()
    },
    indexMethod(index) {
      return (this.listQuery.page - 1) * this.listQuery.perPage + index + 1
    },
  }
}
</script>
